<template>
  <!--      :style="[$parent.getTitleDirStyle, getModBottom]"-->
  <r-operator
    class="skill"
    :operators="['edit', 'drag', 'skin', 'setting']"
    @edit="isShowEdit = !isShowEdit"
    @skin="isShowSkin = !isShowSkin"
    @setting="isShowSetting = !isShowSetting"
  >
    <r-title icon="skill" :isShow="isTitleShow" v-model="title" />
    <div
      class="skill__empty"
      v-if="dataList.length === 0"
      @click="isShowEdit = true"
    >
      <i class="resume resume-plus" />
      <span>技能特长</span>
    </div>
    <div class="skill__content" v-else>
      <div
        class="skill__content__item"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <i class="resume resume-del" @click="delItem(index)" />
        <div class="skill__content__item--name">{{ item.name }}</div>
        <div class="skill__skin" :class="`skill__skin--${settingList.skin}`">
          <div
            class="skill__content__item--progress"
            :style="{ width: `${item.value}%` }"
          ></div>
        </div>
      </div>
    </div>
    <teleport to="#app">
      <edit
        :originData="dataList"
        @save="onSave"
        v-model="isShowEdit"
        v-if="isShowEdit"
      />
    </teleport>
    <!--换肤-->
    <skin
      v-model="settingList.skin"
      v-if="isShowSkin"
      @mouseleave="isShowSkin = false"
    />
    <!--设置-->
    <r-setting
      v-show="isShowSetting"
      v-model="settingList.switchLs"
      @mouseleave="isShowSetting = !isShowSetting"
    />
  </r-operator>
</template>

<script>
import RTitle from "@/components/base/RTitle";
import ROperator from "@/components/base/ROperator";
import RSetting from "@/components/base/RSetting";
import Edit from "./edit";
import { reactive, toRefs } from "vue";
import useData from "../useData";
import Skin from "./skin";

export default {
  name: "Skill",
  components: { Skin, Edit, ROperator, RTitle, RSetting },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const baseData = useData(props.id);
    const visible = reactive({
      isShowEdit: false,
      isShowSetting: false,
      isShowSkin: false,
    });
    const delItem = (index) => baseData.dataList.splice(index, 1);
    const onSave = (newData) => {
      visible.isShowEdit = false;
      baseData.dataList.value = newData;
    };
    return {
      ...baseData,
      ...toRefs(visible),
      delItem,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.skill {
  &__empty {
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: lightgrey 1px dashed;
    background: rgba(135, 206, 250, 0.2) content-box;
    cursor: pointer;

    img {
      height: 12px;
      margin-right: 5px;
    }
  }

  &__content {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &__item {
      padding: 0 3px;
      position: relative;
      margin-right: 10px;
      cursor: pointer;

      &:hover {
        background: rgba(246, 246, 246, 0.8);

        .resume-del {
          display: block;
        }
      }

      .resume-del {
        position: absolute;
        right: -6px;
        top: -6px;
        width: 12px;
        height: 12px;
        display: none;
      }

      &--name {
        text-align: left;
        margin-left: 2px;
        margin-bottom: 5px;
      }

      &--progress {
        height: 100%;
        background-color: var(--baseColor);
      }
    }
  }

  .skill__skin--base {
    width: 150px;
  }

  &__skin {
    border: 1px solid var(--baseColor);
    &--rect {
      .skill__skin--base();
      height: 10px;
    }
    &--round {
      .skill__skin--base();
      border-radius: 5px;
      height: 10px;
    }
    &--round--small {
      .skill__skin--base();
      border-radius: 2.5px;
      height: 5px;
    }
    &--quad {
      .skill__skin--base();
      height: 10px;
      transform: skewX(-25deg);
    }
  }
}
</style>
